<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <div ref="chartFont" style="width: 100%; height: 50px"></div>
          <div style="display: flex; justify-content: space-around">
            <el-card shadow="hover" style="width: 20vw">
              <div style="display: flex; justify-content: space-between">
                <i class="el-icon-user-solid" style="font-size: 25px"> </i>
                <div>
                  <span>7</span>
                </div>
              </div>
              <hr style="color: #999" />
              <span style="font-size: 12px; color: #999"> 总人数 </span>
            </el-card>
            <el-card shadow="hover" style="width: 20vw">
              <div style="display: flex; justify-content: space-between">
                <i class="el-icon-s-custom" style="font-size: 25px"> </i>
                <div>
                  <span>1</span>
                </div>
              </div>
              <hr style="color: #999" />
              <span style="font-size: 12px; color: #999"> 当前在线人数 </span>
            </el-card>
            <el-card shadow="hover" style="width: 20vw">
              <div style="display: flex; justify-content: space-between">
                <i class="el-icon-view" style="font-size: 25px"> </i>
                <div>
                  <span>6</span>
                </div>
              </div>
              <hr style="color: #999" />
              <span style="font-size: 12px; color: #999"> 今日浏览人数 </span>
            </el-card>
            <el-card shadow="hover" style="width: 20vw">
              <div style="display: flex; justify-content: space-between">
                <i class="el-icon-edit" style="font-size: 25px"> </i>
                <div>
                  <span>3</span>
                </div>
              </div>
              <hr style="color: #999" />
              <span style="font-size: 12px; color: #999"> 参与互动人数 </span>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 分类浏览表 -->
    <el-row style="margin: 20px" :gutter="20">
      <el-col :span="16">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>分类浏览表</span>
          </div>
          <el-button type="text" @click="handleBack" v-if="isCategoryDetail">
            {{ "<<返回" }}
          </el-button>
          <div
            @click="handleWatchClick"
            ref="chartWatch"
            style="width: 100%; height: 480px"
          ></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>今日各时间段在线人数</span>
          </div>
          <div ref="chartColumn" style="width: 100%; height: 190px"></div>
        </el-card>
        <el-card shadow="hover" style="margin-top: 15px">
          <div slot="header" class="clearfix">
            <span>热搜排名</span>
          </div>
          <div ref="chartCircle" style="width: 100%; height: 190px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chartColumn: null,
      chartCircle: null,
      chartFont: null,
      chartWatch: null,
      isCategoryDetail: false,
      drillDownData: [
        {
          dataGroupId: "animals",
          data: [
            ["Cats", 4],
            ["Dogs", 2],
            ["Cows", 1],
            ["Sheep", 2],
            ["Pigs", 1],
          ],
        },
        {
          dataGroupId: "fruits",
          data: [
            ["Apples", 4],
            ["Oranges", 2],
          ],
        },
        {
          dataGroupId: "cars",
          data: [
            ["Toyota", 4],
            ["Opel", 2],
            ["Volkswagen", 2],
          ],
        },
      ],
      // 折线图配置项
      columnOption: {
        xAxis: {
          type: "category",
          data: [
            "0-3",
            "3-6",
            "6-9",
            "9-12",
            "12-15",
            "15-18",
            "18-21",
            "21-24",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [0, 3, 2, 5, 5, 2, 1, 1],
            type: "line",
            smooth: true,
          },
        ],
      },
      circleOption: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          top: "bottom",
          data: [
            "rose1",
            "rose2",
            "rose3",
            "rose4",
            "rose5",
            "rose6",
            "rose7",
            "rose8",
          ],
        },
        toolbox: {
          // show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "模块占比",
            type: "pie",
            radius: [20, 80],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5,
            },
            data: [
              { value: 30, name: "分类" },
              { value: 28, name: "铃丫之旅" },
              { value: 26, name: "分类" },
              { value: 24, name: "关键" },
              { value: 22, name: "启示录" },
              { value: 20, name: "视频" },
              { value: 18, name: "重庆洪崖洞2" },
              { value: 16, name: "重庆高铁" },
            ],
          },
        ],
      },
      watchOption: {
        xAxis: {
          data: [
            "视频一类",
            "视频录制",
            "测试二类",
            "分类4",
            "分类5",
            "分类6",
            "分类7",
            "分类8",
            "分类9",
          ],
        },
        yAxis: {},
        dataGroupId: "",
        animationDurationUpdate: 500,
        series: {
          type: "bar",
          id: "sales",
          data: [
            {
              value: 5,
              groupId: "视频一类",
            },
            {
              value: 2,
              groupId: "视频录制",
            },
            {
              value: 4,
              groupId: "测试二类",
            },
            {
              value: 7,
              groupId: "分类4",
            },
            {
              value: 1,
              groupId: "分类5",
            },
            {
              value: 5,
              groupId: "分类6",
            },
            {
              value: 8,
              groupId: "分类7",
            },
            {
              value: 2,
              groupId: "分类8",
            },
            {
              value: 6,
              groupId: "分类9",
            },
          ],
          universalTransition: {
            enabled: true,
            divideShape: "clone",
          },
        },
      },
      //   字体option
      fontOption: {
        graphic: {
          elements: [
            {
              type: "text",
              left: "center",
              top: "center",
              style: {
                text: "心理量表后台管理系统",
                fontSize: 30,
                // fontWeight: "bold",
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: "transparent",
                stroke: "#5470c6",
                lineWidth: 1,
              },
              keyframeAnimation: {
                duration: 3000,
                loop: false,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: "transparent",
                      lineDashOffset: 200,
                      lineDash: [200, 0],
                    },
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: "transparent",
                    },
                  },
                  {
                    percent: 1,
                    style: {
                      fill: "black",
                    },
                  },
                ],
              },
            },
          ],
        },
      },
    };
  },
  methods: {
    initChart() {
      // 初始化图表
      this.chartColumn = echarts.init(this.$refs.chartColumn);
      this.chartColumn.setOption(this.columnOption);
      this.chartCircle = echarts.init(this.$refs.chartCircle);
      this.chartCircle.setOption(this.circleOption);
      this.chartFont = echarts.init(this.$refs.chartFont);
      this.chartFont.setOption(this.fontOption);
      this.chartWatch = echarts.init(this.$refs.chartWatch);
      this.chartWatch.setOption(this.watchOption);

      this.chartWatch.on("click", (params) => {
        console.log(params.data);
        this.isCategoryDetail = true;
        this.chartWatch.setOption({
          xAxis: {
            data: [
              "校园",
              "可爱",
              "日常",
              "标签4",
              "标签5",
              "标签6",
              "标签7",
              "标签8",
              "标签9",
            ],
          },
          yAxis: {},
          dataGroupId: "",
          animationDurationUpdate: 500,
          series: {
            type: "bar",
            id: "sales",
            data: [
              {
                value: 3,
                groupId: "校园",
              },
              {
                value: 7,
                groupId: "可爱",
              },
              {
                value: 1,
                groupId: "日常",
              },
              {
                value: 1,
                groupId: "标签4",
              },
              {
                value: 5,
                groupId: "标签5",
              },
              {
                value: 1,
                groupId: "标签6",
              },
              {
                value: 9,
                groupId: "标签7",
              },
              {
                value: 2,
                groupId: "标签8",
              },
              {
                value: 7,
                groupId: "标签9",
              },
            ],
            universalTransition: {
              enabled: true,
              divideShape: "clone",
            },
          },
        });
      });
    },
    handleWatchClick() {
      // console.log(this.watchOption);
    },
    handleBack() {
      this.isCategoryDetail = false;
      this.chartWatch.setOption({
        xAxis: {
          data: [
            "视频一类",
            "视频录制",
            "测试二类",
            "分类4",
            "分类5",
            "分类6",
            "分类7",
            "分类8",
            "分类9",
          ],
        },
        yAxis: {},
        dataGroupId: "",
        animationDurationUpdate: 500,
        series: {
          type: "bar",
          id: "sales",
          data: [
            {
              value: 5,
              groupId: "视频一类",
            },
            {
              value: 2,
              groupId: "视频录制",
            },
            {
              value: 4,
              groupId: "测试二类",
            },
            {
              value: 7,
              groupId: "分类4",
            },
            {
              value: 1,
              groupId: "分类5",
            },
            {
              value: 5,
              groupId: "分类6",
            },
            {
              value: 8,
              groupId: "分类7",
            },
            {
              value: 2,
              groupId: "分类8",
            },
            {
              value: 6,
              groupId: "分类9",
            },
          ],
          universalTransition: {
            enabled: true,
            divideShape: "clone",
          },
        },
      });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style>
/* .el-card__body {
    padding: 0;
} */
</style>
